<template>
    <div style="text-align:center;">
        <div style="font-size:18px;text-align:left;">我的店铺</div>
        <hr><br>
        <el-form ref="form1" :model="form1"  label-width="100px" >
            <div style="width:98%;max-width:1400px;margin:0 auto;" >
              <el-form-item label="店铺名称">
                <el-input v-model="form1.shopName"></el-input>
              </el-form-item>  
              <el-form-item label="入住时间">
                <el-input  v-model="form1.createDateName" disabled></el-input>
              </el-form-item>
              <el-form-item label="店铺状态" align='left'>
                <el-select clearable v-model="form1.status" placeholder="店铺状态">
                    <el-option
                    v-for="item in shopStatusOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
                <!-- <el-input  v-model="form1.status"></el-input> -->
              </el-form-item>
              <el-form-item label="责任人身份证">
                <el-input  v-model="form1.cardId" disabled></el-input>
              </el-form-item>
              <el-form-item label="责任人姓名">
                <el-input v-model="form1.username" disabled></el-input>
              </el-form-item>
              <el-form-item label="责任人电话">
                <el-input v-model="form1.phone" disabled></el-input>
              </el-form-item>
              <el-form-item label="店铺电话">
                <el-input v-model="form1.phone" disabled></el-input>
              </el-form-item>  
              <el-form-item label="主营业务">
                <el-input v-model="form1.majorBusiness"></el-input>
              </el-form-item>
              <el-form-item label="店铺等级">
                <el-input v-model="form1.shopGrade" disabled></el-input>
              </el-form-item>
              <el-form-item label="店铺logo">
                <div style="border:1px solid #bfcbd9;line-height:100px;color:#bfcbd9;height:100px;width:230px;">
                  <input type="file" id="uimg2" accept="image/gif,image/jpeg,image/bmp,image/png" @change="setValue2(uploadImg('#uimg2','#logo2'))" style="position:absolute;left: 0px;right: 0px;top: 0px;opacity: 0;filter: Alpha(opacity=0);z-index: 2;height:100px;"/>
                  <div id="logo2" style="height:100%">
                      <span v-if="!form1.shopImg">+</span>
                      <img v-else :src="form1.shopImg" style='width:230px;height: 100px;' />
                  </div>
                  <!-- <div id="imgs" style="height:80px;width:230px;overflow:hidden;">+</div> -->
                </div>
                <el-input v-show="false" v-model="form1.shopImg"></el-input>
              </el-form-item>
               <el-form-item label="首页图片">
                <div style="border:1px solid #bfcbd9;line-height:100px;color:#bfcbd9;height:100px;width:230px;">
                  <input type="file" id="uimg1" accept="image/gif,image/jpeg,image/bmp,image/png" @change="setValue1(uploadImg('#uimg1','#logo1'))" style="position:absolute;left: 0px;right: 0px;top: 0px;opacity: 0;filter: Alpha(opacity=0);z-index: 2;height:100px;"/>
                  <div id="logo1" style="height:100%">
                      <span v-if="!form1.bannerImg">+</span>
                      <img v-else :src="form1.bannerImg" style='width:230px;height: 100px;' />
                  </div>
                  <!-- <div id="imgs" style="height:80px;width:230px;overflow:hidden;">+</div> -->
                </div>
                <el-input v-show="false" v-model="form1.bannerImg"></el-input>
              </el-form-item> 
              <el-form-item label="详细地址">
                <el-input type="textarea" autosize v-model="form1.address"></el-input>
              </el-form-item>
              <el-form-item label="店铺简介" class="editor">
                  <div style="text-align:left;">
                    <umeditor v-bind:value="form1.introduce" v-bind:config=config  v-on:input="input" ></umeditor>
                  </div>
              </el-form-item>
            
              <!-- <el-form-item label="店铺标签">
                <el-checkbox-group v-model="labelList">
                    <template v-for="item in labelPublic">
                         <el-checkbox :label="item.id">{{item.name}}</el-checkbox>
                    </template>
              </el-checkbox-group>
                <el-input v-model="form.label_ids" v-show="false"></el-input>
              </el-form-item>
              <el-form-item label="店铺主标签">
                <template v-for="item in labelPublic">
                  <el-radio class="radio" v-model="labelMain" :label="item.id">{{item.name}}</el-radio>
                </template>
              </el-form-item> -->
              <el-form-item>
                <el-button type="primary" @click="submitData(form1)">保存</el-button>
              </el-form-item>
              <div style="text-align:left;">
                <el-dialog title="选择店铺位置" :visible.sync="mapVisible" >
                     <!-- 地图-->
                         <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult" :events="events" ></el-amap-search-box>
                   <div class="amap-page-container">
                        
                        <el-amap :vid="'amap-vue'" :center="center" :zoom="zoom" :map-manager="amapManager" :plugin="plugin" :events="events">
                           <el-amap-marker v-for="marker in markers" :position="marker"></el-amap-marker>
                        </el-amap>
                  </div>
                    <div style="clear:both;"></div>
                    <div slot="footer" class="dialog-footer">
                    
                      <el-button type="primary" @click="mapVisible=false;">保存</el-button>
                    </div>
                </el-dialog>
              </div>
             
            </div>

        </el-form>
    </div>
</template>
<script>
    import $ from 'jquery';
    import Vue from 'vue';
    //import AMap from 'AMap'
    import AMap from 'vue-amap';
    //import { quillEditor } from 'vue-quill-editor';
    import umeditor from '../common/UMeditor.vue';

    Vue.use(AMap);

    import { AMapManager } from 'vue-amap';
    let amapManager = new AMapManager();


  export default {
    data() {
      return {
        shopStatusOptions:[
          {id:0,name:'正常营业'},
          {id:1,name:'暂停营业'}
        ],
        num: 123,
        form1: {
          id:'',
          name:'',
          card:'',
          responsibleName:'',
          // label_ids:'',
          // main_label_id:'',
          responsiblePhone:'',
          shopPhone:'',
          detail:'',
          address:'',
          // shopImg: '',
        },
        editorOption:{  //编辑器选项

        },

        labelList:[],
        labelPublic:[],
        labelMain:'',


        vid: 'amap-vue-1',
        zoom: 12,
        center: [121.59996, 31.197646],
        events: {
          'moveend': () => {
            let mapCenter = this.amapManager.getMap().getCenter();
            this.center = [mapCenter.getLng(), mapCenter.getLat()];
          },
          'zoomchange': () => {
            this.zoom = this.amapManager.getMap().getZoom();
          },
          'click': (e) => {
              // console.log(e);
              //console.log(e.lnglat);
              //console.log(e.lnglat.lng);
            this.markers=[[e.lnglat.lng,e.lnglat.lat]];
            //this.ruleForm.shopaddress=e.lnglat.lng+","+e.lnglat.lat;
            this.form.lng=e.lnglat.lng;
            this.form.lat=e.lnglat.lat;
            this.shopaddressDescription();
          },
          'complete':()=>{
              
          }
        },
        plugin: ['ToolBar', {
          pName: 'MapType',
          defaultType: 0,
          events: {
            init(o) {
              //console.log(o);
            }
          }
        }],
        amapManager: amapManager,
        markers: [
                 [121.59996, 31.197646]
        ],
        searchOption: {
            city: '',
            //citylimit: true
        },
        
        mapVisible:false,
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 320,
        },
        shop: null,
      }
    },
    created() {
      let _shop = localStorage.getItem('shop')
      this.shop = JSON.parse(_shop)
      console.log(this.shop)
      if(this.shop){
        this.getShopData(this.shop.shopId)
      }
    },
    mounted:function(){
        console.log(this.$imConn)
        // var self=this;
        // var shopId=localStorage.getItem('shopId');
        // $.post(self.$host+"/admin/shopLabel/getPublic",{},function(data){
        //     self.labelPublic=data.data;
        // });
        // var data={};
        // data.id=new Array();
        // data.id.push(shopId);
        // self.myajax("/shop/getByUserId",data,function(data){
        //   console.log(data)
        //     var back=data.data;

        //     self.form=back
        //     if(back.imgs!=null&&back.imgs!=''){
        //       $("#imgs").html("<img src='"+back.imgs+"' style='width:230px;height:80px;' />");
        //       console.log("<img src='"+back.imgs+"' style='width:230px;height:80px;' />")
        //     }
            
        // })
    },
    methods: {
      getShopData(id){
        let _data={
          id: id
        }
        this.myajax("/shop/findByShopId",_data,res=>{
          console.log(res)
          if(res.code==1000){
            this.form1 = res.data
          }
        });
      },
      showMap(){
          this.mapVisible=true;
      },
      onSearchResult(pois) {
          var self=this;
          //console.log(pois);
          var lnglat=pois[0];
          if(lnglat){
              //self.ruleForm.shopaddress=lnglat.lng+","+lnglat.lat;
              self.form.lng=lnglat.lng;
              self.form.lat=lnglat.lat;
              self.shopaddressDescription();
              self.center=[lnglat.lng,lnglat.lat];
              self.markers=[[lnglat.lng,lnglat.lat]];
              self.zoom=20;
          }
      },
      shopaddressDescription(){
          var self=this;
          var addr=self.form.lng+","+self.form.lat;
          $.ajax({
              type:'get',
              url:"http://restapi.amap.com/v3/geocode/regeo?key=1a25480e49789bf3e479544af049601c&s=rsv3&location="+addr+"&platform=JS&logversion=2.0&sdkversion=1.3",
              success:function (data){
                  if(data.infocode=10000){
                      self.form.shopaddress=data.regeocode.formatted_address+" 附近";
                  }
              }
          })
      }, 
      setValue1(value){
          // console.log(value)
           // console.log(Vue.prototype.$host)
          if(value){
              this.form1.bannerImg = Vue.prototype.$host + value;
          }
      },
      setValue2(value){
          // console.log(value)
          if(value){
              this.form1.shopImg = Vue.prototype.$host + value;
          }
      },
      submitData(bb){
          var self=this;
          
          var name=self.form1.shopName;
          var card=self.form1.cardId;
          var responsibleName=self.form1.username;
          var responsiblePhone=self.form1.phone;
          var shopPhone=self.form1.phone;
          var detail=self.form1.introduce;
          // var label_ids=self.labelList.join(',');
          // var main_label_id=self.labelMain;
          var address=self.form1.address;
          console.log(self.form1)

          if(!name){
               $.tooltip("请输入店铺名称",3000);
               return;
          }
          if(card.length!=18){
            console.log(card.length)
               $.tooltip("身份证号是18位",3000);
               return;
          }
          if(!responsibleName){
              $.tooltip("请输入责任人姓名",3000);
               return;
          }
          if (!/^(0\d{2}-\d{8}(-\d{1,4})?)|(0\d{3}-\d{7,8}(-\d{1,4})?)$/.test(responsiblePhone) 
                && !/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(responsiblePhone)) {
              $.tooltip("请输入正确的店铺联系电话",3000);
              return;
          }
          if(!shopPhone){
              $.tooltip("请选择店铺电话",3000);
               return;
          }
          if(!self.form1.bannerImg){
              $.tooltip("请添加店铺首页图片",3000);
               return;
          }
          if(!self.form1.shopImg){
              $.tooltip("请添加店铺logo",3000);
               return;
          }
          if(!detail){
              $.tooltip("请输入店铺简介",3000);
               return;
          }
          if(!address){
              $.tooltip("请输入店铺详细地址",3000);
               return;
          }
          // if(!label_ids){
          //     $.tooltip("请至少选择一个店铺标签",3000);
          //      return;
          // }
          // if(!main_label_id){
          //     $.tooltip("请选择店铺主标签",3000);
          //      return;
          // }
          self.myajax("/shop/updateShop",self.form1,function(data){
              if(data.code==1000){
                   $.tooltip("保存成功",3000,true);
              }else{
                  $.tooltip("保存失败",3000);
              }
          });
      },
      resetForm(formName) {
          this.$refs[formName].resetFields();
      },
      input(val){
        this.form1.introduce=val.content;
      },
    },
    components: {
       // quillEditor,                              // 声明组件quillEditor
        umeditor
    },
  }
</script>
<style>
    .el-vue-amap-container{
        height: 400px;
    }

    #amap{
        height:100px;
    }
    .search-box {
        position: relative;
        /*top: 35px;*/
        left: 10px;
        height: 30px;
        width: 90%;
        border:1px solid #bbccaa;
    }
    input,textarea{
        max-width: 700px;
    }
    .search-box-wrapper input{
      max-width: 100%;
    }
    .editor{
        max-width: 1400px;
    }
    .mapKey{
        position: absolute;
        top: 0px;
        left: 590px;
        width: 110px;
        z-index: 1;
    }
    img{
      max-width: 100%;
    }
</style>